<template>
	<input
		type="text"
		class="flex-1 text-left"
		v-model="keyword"
		@input="search"
		placeholder="Search"
	/>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			debounce: null
		};
	},
	created() {
		this.debounce = this.$utils.debounce(this.getKeyword, 1000, false);
	},
	methods: {
		search() {
			this.debounce();
		},
		getKeyword() {
			this.$emit('search', this.keyword);
		}
	}
};
</script>

<style lang="scss" scoped>
</style>
